<template>
	<view class="page-container  page-top">
		<view class="flex just-sb align-center  top_select">
			<my-picker v-model="params.type" @change="changeType"  placeholder="全部类型" :list="type"></my-picker>
			<my-datepicker :start.sync="params.startTime"  :end.sync="params.endTime"  @change="loadData(1)"></my-datepicker>
		</view>
		<view class="list">
			<navigator class=" list_item flex bgfff mb28"  v-for="item in dataSouce"  :url="'/pages/message/detail?id='+item.id">
				<image class="flex-sk0 cover" :src="$fullImage(item.picUrl)" mode=""></image>
				<view class="right flex-grow1 flex flex-col just-sb">
					<view class="fwb c333 fs28">{{item.name}}</view>
					<view class="fs22 c666 flex align-center ">
						<image class="location" src="../../static/location.png" mode=""></image>
						<view>{{item.deviceName}}</view>
					</view>
					<view class="flex  just-sb c999 fs22">
						<view>#垃圾满溢预警</view>
						<view>{{item.alarmTime}}</view>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
import { gateway } from '@/utils/api'
import { useListHook } from '@/utils/hooks.js'
	export default {
		mixins:[useListHook],
		data() {
			return {
				listUrl:gateway.busscommon+ '/aiot/farmDeviceAlarm/list',
				params:{
					startTime:'',
					endTime:'',
					type:''
				},
				type:[
					{text:'垃圾溢满',value:'1'},
					{text:'河水污染',value:'2'},
				]
			}
		},
		methods: {
			changeType(){
				console.log(this.params.type);
				this.loadData(1)
			}
		}
	}
</script>

<style lang="less" scoped>
.list_item{
	height: 209.03rpx;
	border-radius: 16.67rpx;
	image.cover{
		width: 209.03rpx;
		height: 209.03rpx;
		border-radius: 16.67rpx;
	}
	image.location{
		width: 30.47rpx;
		height: 26.39rpx;
		margin-right: 17rpx;
	}
	.right{
		padding: 33rpx 28rpx;
	}
}
</style>
